<template>
	<view>
		<free-nav-bar :title="'仿微信('+noreadNumber+')'" :fixed="false" @search="search" showright @openExtend="openExtends">


		</free-nav-bar>
		<block v-for="item,index in list" :key="index">
			<free-media-list @long="long1" @click="clickItem(item)" v-if="item.istop" :item="item" :index="index"></free-media-list>
		</block>
		<block v-for="item,index in list" :key="index">
			<free-media-list @long="long1" @click="clickItem(item)" v-if="!item.istop" :item="item" :index="index"></free-media-list>
		</block>
		<free-popup ref="extend" maskColor :bodyWidth="240" :bodyHeight="getMenusHeight">
			<view class="flex flex-column free-animation" :style="getMenusStyle">
				
				<view class="flex-1 flex align-center" @click="clickmenu(item.event)" hover-class="bg-light" v-for="item in menu">
					<text class="font-md pl-2">{{item.name}}</text>
				</view>

			</view>
		</free-popup>
	</view>

</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeMediaList from "@/components/free-ui/free-media-list.vue"
	import freePopup from "@/components/free-ui/free-popup.vue"
	import auth from "@/common/mixin/auth.js"
	import {
		mapState
	} from "vuex"
	export default {
		mixins:[auth],
		components: {
			freeNavBar,
			freePopup,
			freeMediaList
		},
		data() {
			return {
				propIndex:-1,
				menu:[
					{
						name:"设为置顶",
						event:"setTop"
					},
					{
						name:"删除该聊天",
						event:"delChat"
					},
				],
				// noreadNumber: 0,
				

			}
		},
		
		filters: {
			formatTime(value) {
				return $Time.gettime(value)
			}
		},
		onShow() {
			 this.$store.dispatch("getChatList")
		},
		onLoad() {
			// this.list.forEach(el => {
			// 	console.log(el,"el")
			// 	this.noreadNumber += el.noreadnum
			// })
			console.log(this.user)

			// 			// #ifdef APP-PLUS-NVUE
			// const domModule = weex.requireModule('dom')
			// domModule.addRule('fontFace', {
			//     'fontFamily': "iconfont",
			//     'src': "url('https://at.alicdn.com/t/font_1365296_vumpzwvr0z.ttf')"
			// });
			// 	// #endif

		},
		computed:{
			getMenusHeight(){
				let H=100;
				return this.menu.length*H
			},
			getMenusStyle(){
				
				return `width:240rpx;height: ${this.getMenusHeight}rpx;`
			},
			...mapState({
				user: state => state.user.user,
				list:state=>state.user.chatList,
				chat:state=>state.user.chat,
				noreadNumber:state=>state.user.totalNoreadnum,
			})
		},
		methods: {
			search(){
			console.log("搜索");
			uni.navigateTo({
				url:"/pages/search/search"
			})
			},
			clickItem(e){
				console.log(e,"e");
				uni.navigateTo({
					url:"/pages/chat/chat?type=user&&params="+encodeURIComponent(JSON.stringify(e))
				})
				this.chat.readchatItem(e.id,e.chat_type)
				
			},
			clickmenu(event){
				console.log(event,"event");
				if(event == 'delChat'){
					this.list.splice(this.propIndex,1)
									this.$refs.extend.hidden()
					
				}else if(event == 'setTop'){
					
					this.list[this.propIndex].istop=!this.list[this.propIndex].istop
					this.$refs.extend.hidden()
					
				}
			// 	case "setTop":
			// 	break;
			// case "delChat":
			// 	break;
			
			},
			openExtends() {
				console.log(12334);
				this.$refs.extend.show(100, 100)
			},
			long1(e) {
				this.propIndex=e.index
				this.menu[0].name=this.list[this.propIndex].istop?'取消置顶':'设为置顶'
				console.log(e, "e");
				this.$refs.extend.show(e.x, e.y)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.free-animation{
		/* #ifdef APP-PLUS_NVUE */
		transform: scale(0,0);
		opacity: 0;
		/* #endif */
	}
</style>
